<template>
  <div style="display: flex; align-items: center">
    <template v-if="props.status == 'success'">
      <el-icon color="#21ba45">
        <Check />
      </el-icon>
    </template>
    <template v-else-if="props.status == 'uploading'">
      <el-icon class="is-loading" color="#21ba45">
        <Loading />
      </el-icon>
    </template>
    <template v-else-if="props.status == 'importing'">
      <el-icon class="is-loading" color="#21ba45">
        <RefreshRight />
      </el-icon>
    </template>
    <template v-else-if="props.status == 'failure'">
      <el-icon color="#c10015">
        <Close />
      </el-icon>
    </template>
    <template v-else-if="props.status == 'pause'">
      <el-icon color="#FFA940">
        <CaretRight />
      </el-icon>
    </template>
    <template v-else>
      <el-icon color="#c10015">
        <Warning />
      </el-icon>
    </template>
    <span
      :style="{
        'margin-left': props.gap + 'px' || '10px',
      }"
      >{{ props.label || props.status }}</span
    >
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  status: string;
  label?: string;
  gap?: number;
}>();

interface IconStatusMap {
  status: string;
  color?: string;
  class?: string;
  gap?: number;
  icon?: any;
}
</script>

<style scoped></style>
